<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="评价" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="flex align-center padding-40">
			<view @click="changeType('all')" :class="q.type == 'all' ? 'color-zhuse':''" class="fs-30 color-333 margin-right-60">全部</view>
			<view @click="changeType('img')"  :class="q.type == 'img' ? 'color-zhuse':''" class="fs-30 color-333 margin-right-60">晒图</view>
			<view @click="changeType('new')" :class="q.type == 'new' ? 'color-zhuse':''" class="fs-30 color-333 margin-right-60">最新</view>
		</view>
		<view class="padding-x-24">
			<!-- 评价列表 -->
			<view v-for="(item,index) in list" :key='index' class="margin-bottom-30 bg-fff padding-30 radius10">
				<view class="flex align-center justify-between">
					<view class="flex align-center">
						<image style="width: 72rpx;height: 72rpx;border-radius: 100%;" :src="item.avatar"></image>
						<view class="margin-left-20">
							<view class="fs-24 color-333">{{item.name}}</view>
							<view class="flex align-center">
								<image  v-for="(item2, index2) in 5" :key="index2" :src="item.score > index2  ? '../../static/img/star_on.png':'../../static/img/star.png'"  class="star_icon"></image>
							</view>
						</view>
					</view>
					<text class="fs-22 color-999">{{item.create_time}}</text>
				</view>
				<view class="fs-26 color-333 margin-y-16">{{item.content}}</view>
				<view class="flex align-center flex-wrap margin-top-20">
					<image v-for="(item,index) in item.imgs" :key='index' style="width: 160rpx;height: 160rpx;margin-right: 16rpx;" :src="item" class="radius10"></image>
				</view>
			</view>
			
			<view class="nomore" :class="loadStatus" v-if="list.length"></view>
			<empty v-if="list.length < 1"></empty>
			<!-- 评价列表end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				q:{
					shop_id:'',
					type:'all',
					page:1
				},
				hasMore: true,
				loadStatus: '',
				list: [],
			}
		},
		onReachBottom() {
			if(this.hasMore){
				this.q.page += 1;
				this.getList();
			}
		},
		onLoad(opt) {
			this.q.shop_id = opt.shop_id;
			this.getList();
		},
		methods:{
			getList(){
				this.isLoading = true;
				this.$api.comment_list(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.list = [...this.list, ...res.data.data];
						if (res.data.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			changeType(type){
				this.q.type = type;
				this.q.page = 1;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.star_icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>
